<template>
  <div class="container">
    <scroll-view :scroll-y="true"
                 :style="{'height': '100%'}"
                 @scroll="scroll"
                 @scrolltolower="pullrefresh"
                 :scroll-with-animation="true"
                 :scroll-top="toTop">
      <!-- 会员权益 -->
      <div class="equitybox">
        <div class="card">
          <div class="title">
            <div>
              <img class="titleicon"
                   v-if="base_url"
                   :src="base_url+'/mp_3.1.1/plus_icon_v.png'"
                   alt />
              <span class="titletext">查看会员卡9大权益</span>
            </div>
            <div @click="handleOpen">
              <span class="titlebtn">{{isOpen?"收起":"展开"}}</span>
              <img class="titlearrow"
                   :class="isOpen&&'titlearrow-active'"
                   v-if="base_url"
                   :src="base_url+'/mp_3.1.1/plus_arrow_down.png'"
                   alt />
            </div>
          </div>
          <div class="equitylist"
               :style="{height:isOpen?'286rpx':'140rpx'}">
            <div class="equityitem"
                 v-for="(item,i) in rights"
                 :key="i"
                 @click="equityDetail(i)">
              <img v-if="imgUrl&&item.image"
                   :src="imgUrl+item.image"
                   mode="widthFix"
                   alt />
              <p>{{item.name}}</p>
            </div>
          </div>
          <div class="equitytip">消费任意商家会员卡&nbsp;可省19863元/年</div>
        </div>
        <div id="equityopen"
             v-if="!is_plus"
             class="equityopen"
             @click="toMore(1)">立即开通</div>
      </div>
      <!-- 渐变背景 -->
      <div class="bgwrap">
        <!-- 营销位/广告位 -->
        <div class="bannerbox">
          <carousel :banner="banner"
                    @toDetail="to_detail"></carousel>
          <div class="adverbox"
               v-if="advs.length==2">
            <div v-for="(adv,index) in advs"
                 :key="index"
                 @click="to_detail(adv)">
              <img v-if="imgUrl&&adv.ad_image"
                   :src="imgUrl+adv.ad_image" />
            </div>
          </div>
          <!-- 懒人福利社 -->
          <!-- <div v-if="welfare" class="plushuodong" @click="plusEquity">
            <img v-if="base_url" :src="welfare" alt />
          </div> -->
        </div>
        <!-- nav联动导航 -->
        <div id="navlist"
             class="navlist"
             :class="{'sticky-fixed':isFixed}">
          <div class="navitem"
               :class="item.type==type&&'active'"
               v-for="(item,i) in navArr"
               :key="i"
               @click="scrollToId(item.type)">{{item.title}}</div>
        </div>
        <!-- 精选PLUS -->
        <div class="plusbox floor">
          <div class="plusmain"
               :class="phoneIos&&'plusmainIos'">
            <div class="plustitle">
              <div class="titlelf">精选PLUS</div>
              <div class="titlert"
                   @click="toMore">
                <span>查看更多</span>
                <img v-if="base_url"
                     :src="base_url+'/mp_3.1.1/plus_arrow_right.png'"
                     alt />
              </div>
            </div>
            <div class="pluscard"
                 :class="phoneIos&&'pluscardIos'">
              <div class="carditem"
                   v-for="(plus,index) in plus_card"
                   :key="index"
                   @click="toCardDetail(plus)">
                <div class="cardtitle">{{plus.name}}</div>
                <div class="carddesc">{{plus.desc}}</div>
                <div class="cardprice">
                  <span class="yang">¥</span>
                  {{plus.sale_price}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 商城优选 -->
        <div class="mallbox lightbg floor">
          <plusmarket :titleObj="tags[1]"
                      :dataArr="product_list"></plusmarket>
        </div>
        <!-- 生活美容 -->
        <div class="mallbox whitebg floor">
          <plusmarket :titleObj="tags[2]"
                      :dataArr="service_list"></plusmarket>
        </div>
        <!-- 品质医美 -->
        <div class="mallbox whitebg floor">
          <plusmarket :titleObj="tags[3]"
                      :dataArr="beauty_project_list"></plusmarket>
        </div>
        <!-- 精品推荐 -->
        <div class="plusquality whitebg">
          <img v-if="base_url"
               :src="base_url+'/mp_3.1.1/plus_jingping.png'"
               mode="widthFix"
               alt />
        </div>
        <!-- 商品列表 -->
        <div class="goods-list whitebg">
          <div id="malltab"
               :class="tabFixed&&'malltab'">
            <tab v-if="tab_arr.length>0"
                 :tab_arr="tab_arr"
                 :bgcolor="bgcolor"
                 @toggle_tab="toggle_tab"></tab>
          </div>
          <shoplist :mall_List="mallList"></shoplist>
          <div class="daodi"
               v-if="isbottom&&mallList[0]">因为甄选，所以珍稀</div>
        </div>
      </div>
    </scroll-view>
    <!-- 权益弹窗 -->
    <div class="equityPopup"
         :class="show&&'equityPopup-show'">
      <div class="carouselbox">
        <swiper class="banner-swiper"
                previous-margin="30px"
                next-margin="30px"
                :current="equityCurrent"
                @change="change">
          <swiper-item class="banner-item"
                       v-for="(item,index) in rights"
                       :key="index">
            <image class="slide-image"
                   :class="[equityCurrent!=index?'banner-scale':'']"
                   v-if="imgUrl&&item.detail_image"
                   :src="imgUrl+item.detail_image" />
          </swiper-item>
        </swiper>
        <div class="closebtn"
             @tap="closeEquity">
          <img v-if="base_url"
               :src="base_url+'/mp_3.1.1/plus_equity_close.png'"
               alt />
        </div>
      </div>
    </div>
    <!-- 懒人福利社弹窗 -->
    <div class="plusPopup"
         :class="plusPopupShow&&'plusPopup-show'">
      <div class="picpopupbox">
        <img class="close"
             v-if="base_url"
             :src="base_url+'/mp_3.1.1/plus_pop_shut@3x.png'"
             alt
             @click="toMore(1)" />
        <div class="imgbox">
          <img v-if="imgUrl&&popup.img"
               :src="imgUrl+popup.img"
               alt />
        </div>
        <div class="openNow"
             @click="toMore(1)">立即开通</div>
      </div>
    </div>
    <!-- 底部开通会员 -->
    <div class="footer"
         :class="footerShow&&'footer-show'">
      <div class="footerlf">会员可省19863元/年</div>
      <div class="footerrt"
           @click="toMore(1)">立即开通</div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import carousel from "@/components/carousel/carousel"; //轮播组件
import plusmarket from "@/components/plus/plusmarket";
import shoplist from "@/components/shop_list/shop_list";
import tab from "@/components/plus/tab";
export default {
  components: {
    carousel,
    plusmarket,
    shoplist,
    tab
  },
  data () {
    return {
      url: common.is_online
        ? "https://h5.ameimeika.com/life_beauty/#/"
        : "https://h5s.ameimeika.com/life_beauty/#/",
      base_url: common.image_resource, //oss图片
      imgUrl: common.image_response, //http图片
      isOpen: false, //收起(false)||展开(true)
      show: false, //权益弹窗隐藏(false)||显示(true)
      is_plus: false, //是否是会员
      equityCurrent: 0, //当前权益所在的index
      rights: [], //权益数组
      banner: [], //banner数组
      advs: [], //广告位数组
      tags: [], //tab标签
      plus_card: [], //精选plus数组
      product_list: [], //商城优选数组
      service_list: [], //生活美容数组
      beauty_project_list: [], //品质医美数组
      navArr: [
        //nav切换数组
        { type: 1, title: "精选PLUS" },
        { type: 2, title: "商城优选" },
        { type: 3, title: "生活美容" },
        { type: 4, title: "品质医美" }
      ],
      type: 1, //默认选中的nav类型
      isFixed: false, //nav是否固定显示
      navTop: 0, //nav距离顶部的高度
      tabTop: 0, //tabTop距离顶部的高度
      tabFixed: false, //tab是否固定显示
      bgcolor: "#F3F4F6", //tab背景颜色
      scrollTop: 0, //竖向滚动条的位置
      toTop: "", //滚动条所在位置
      footerShow: false, //底部openvip显示隐藏
      tab_arr: [], //tab数组
      tab_id: 0,
      tab_value: "",
      num: 1,
      isbottom: false,
      mallList: [], //商品列表
      f1H: 0,
      f2H: 0,
      f3H: 0,
      f4H: 0,
      province_id: 13, //省份ID
      phoneIos: false, //兼容ios手机
      phoneAndroid: false, //安卓手机
      welfare: "", //后台配置懒人福利社入口
      plusPopupShow: false, //懒人福利社弹窗
      popup: {
        //懒人福利社
        img: "" //弹窗图片
      },
      type: 1, //页面类型 1美食模块 2电商模块
      imei: "mmk", //安卓手机imei（安卓手机必传）
      idfa: "mmk" //ios手机idfa（ios手机必传）
    };
  },
  watch: {
    scrollTop (newVal, oldVal) {
      this.updateNavSticky(); // ①
      this.updateNavChange(); // ②
      this.updateTabSticky(); // ③
      this.updateFooterChange(); // ④
    },
    is_plus (newVal, oldVal) {
      if (newVal == true) {
        this.toTop = 0;
        this.scrollTop = 0;
        this.footerShow = false;
        this.getData();
      }
    }
  },
  onLoad: function (options) {
    // 设置导航栏标题和背景色
    wx.setNavigationBarTitle({
      title: "PLUS会员"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#373844",
      success: res => { }
    });
    //调用方法获取机型处理兼容问题
    var phone = wx.getSystemInfoSync();
    if (phone.platform == "ios") {
      this.phoneIos = true;
    } else if (phone.platform == "android") {
      //(懒人福利社用)
      this.phoneAndroid = true;
    }
    // 获取省ID
    let that = this;
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        that.province_id = info.province_id;
      },
      fail: () => { }
    });
    this.toTop = 0;
    this.scrollTop = 0;
    //  获取数据
    this.getData();
    // 获取tab栏数据
    this.getTabData();
    // ① 获取楼层高度 ③ 吸顶条件
    this.getFloorH();
  },
  onShow () {
    // 设置导航栏标题和背景色
    wx.setNavigationBarTitle({
      title: "PLUS会员"
    });
    wx.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#373844",
      success: res => { }
    });
    this.plusPopupShow = false;
    // 获取省ID
    let that = this;
    wx.getStorage({
      key: "province_info",
      success: res => {
        let info = JSON.parse(res.data);
        if (that.province_id != info.province_id) {
          that.province_id = info.province_id;
        }
      },
      fail: () => { }
    });
    //  获取数据
    this.getData(0);
    // 获取tab栏数据
    this.getTabData();
  },
  onHide () {
    this.toTop = this.scrollTop;
  },
  methods: {
    // ① 获取楼层高度 ② 反向联动 ③ 吸顶条件
    getFloorH () {
      var that = this;
      // 各楼层高度
      var query = wx.createSelectorQuery();
      query.selectAll(".floor").boundingClientRect();
      query.exec(result => {
        let res = result[0];
        that.f1H = res[0].top;
        that.f2H = res[1].top;
        that.f3H = res[2].top;
        that.f4H = res[3].top;
      });
      // nav距顶部高度
      const navlist = wx.createSelectorQuery();
      navlist.select("#navlist").boundingClientRect();
      navlist.exec(res => {
        that.navTop = res[0].top;
      });
      // tab距顶部高度
      const malltab = wx.createSelectorQuery();
      malltab.select("#malltab").boundingClientRect();
      malltab.exec(res => {
        that.tabTop = res[0].top;
      });
    },
    // 获取首页数据
    getData (load = 1) {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/life_shop/plus_channel",
        {
          province_id: this.province_id
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            this.is_plus = res.data.is_plus;
            this.rights =
              res.data.rights && res.data.rights.length > 0
                ? res.data.rights
                : [];
            this.banner =
              res.data.banner && res.data.banner.length > 0
                ? res.data.banner
                : [];
            if (res.data.ads && res.data.ads.length > 0) {
              this.advs =
                res.data.ads.length > 2
                  ? res.data.ads.slice(0, 2)
                  : res.data.ads;
            } else {
              this.advs = [];
            }
            if (res.data.welfare) {
              this.welfare = res.data.welfare;
            }
            if (res.data.plus_card && res.data.plus_card.length > 0) {
              this.plus_card =
                res.data.plus_card.length > 2
                  ? res.data.plus_card.slice(0, 2)
                  : res.data.plus_card;
            }
            this.tags =
              res.data.tags && res.data.tags.length > 0 ? res.data.tags : [];
            if (res.data.product_list && res.data.product_list.length > 0) {
              this.product_list = res.data.product_list.map(item => {
                var obj = {
                  title: item.title,
                  img: item.thumb_image,
                  price: item.price.replace(/(0+)$/g, "").replace(/\.$/gi, ""),
                  origin_price: item.origin_price
                    .replace(/(0+)$/g, "")
                    .replace(/\.$/gi, ""),
                  id: item.id,
                  plus_title: item.plus_title
                };
                return obj;
              });
            }
            if (res.data.service_list && res.data.service_list.length > 0) {
              this.service_list = res.data.service_list.map(item => {
                var obj = {
                  id: item.id,
                  life_shop_id: item.life_shop_id,
                  title: item.service_name,
                  origin_price: item.origin_price
                    .replace(/(0+)$/g, "")
                    .replace(/\.$/g, ""),
                  price: item.price.replace(/(0+)$/g, "").replace(/\.$/gi, ""),
                  service_desc: item.service_desc,
                  img: item.service_image,
                  plus_title: item.plus_title
                };
                return obj;
              });
            }
            if (
              res.data.beauty_project_list &&
              res.data.beauty_project_list.length > 0
            ) {
              this.beauty_project_list = res.data.beauty_project_list.map(
                item => {
                  var obj = {
                    id: item.id,
                    title: item.name,
                    img: item.image,
                    origin_price: item.origin_price
                      .replace(/(0+)$/g, "")
                      .replace(/\.$/gi, ""),
                    price: item.project_price
                      .replace(/(0+)$/g, "")
                      .replace(/\.$/gi, ""),
                    plus_title: item.plus_title
                  };
                  return obj;
                }
              );
            }
            if (load == 1) {
              setTimeout(() => {
                this.getFloorH();
              }, 500);
            }
          }
        }
      );
    },
    // 展开||收起权益卡
    handleOpen () {
      this.isOpen = !this.isOpen;
      setTimeout(() => {
        this.getFloorH();
      }, 500);
    },
    // 当前权益所在的index改变触发
    change: function (e) {
      this.equityCurrent = e.mp.detail.current;
    },
    // 查看权益详情
    equityDetail (index) {
      this.equityCurrent = index;
      this.show = true;
    },
    // 关闭权益详情
    closeEquity () {
      this.show = false;
    },
    // 营销位跳转
    to_detail (item) {
      common.to_detail(item);
    },
    // 懒人福利社
    plusEquity () {
      let that = this;
      let param =
        (this.phoneIos && { type: this.type, idfa: this.idfa }) ||
        (this.phoneAndroid && { type: this.type, imei: this.imei }) ||
        {};
      wx.getStorage({
        key: "user_token",
        success: res => {
          common.mmk_Loading(0);
          common.fly_post("api/act/welfare/getUrl", param, response => {
            common.mmk_Loading(1);
            let res = response.data;
            if (res.status_code == 0) {
              switch (res.data.is_popup) {
                case 0: //不弹窗，直接跳url
                  let router = encodeURIComponent(res.data.url);
                  wx.navigateTo({
                    url: `/pages/package_main/advertisement/main?url=${router}`
                  });
                  break;
                case 1: //弹窗
                  that.popup = res.data.popup;
                  that.plusPopupShow = true;
                  break;
              }
            } else {
              common.mmk_Loading(2, res.message);
            }
          });
        },
        fail: () => {
          wx.navigateTo({ url: "/pages/package_main/login/main" });
        }
      });
    },

    // 精选plus查看更多
    toMore (e) {
      if (e == 1) {
        wx.navigateTo({ url: "/pages/package_mine/all_vip/main" });
      } else {
        let router = encodeURIComponent(`${this.url}selectPlus`);
        wx.navigateTo({
          url: `/pages/package_main/advertisement/main?url=${router}`
        });
      }
    },
    // 查看卡详情
    toCardDetail (item) {
      let router = encodeURIComponent(`${this.url}cardInfor?id=` + item.id);
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${router}`
      });
    },
    // 页面滚动
    scroll (e) {
      this.scrollTop = e.mp.detail.scrollTop;
      this.updateNavSticky(); // ①
      this.updateNavChange(); // ②
      this.updateTabSticky(); // ③
      this.updateFooterChange(); // ④
    },
    // nav锚点跳转
    scrollToId (num) {
      let count = "";
      count = this.phoneIos ? 47 : 46;
      this.toTop = this.scrollTop;
      switch (num) {
        case 1:
          this.toTop = this.f1H - count;
          break;
        case 2:
          this.toTop = this.f2H - count;
          break;
        case 3:
          this.toTop = this.f3H - count;
          break;
        case 4:
          this.toTop = this.f4H - count;
          break;
      }
    },
    // ①更新navList吸顶
    updateNavSticky () {
      this.isFixed = this.scrollTop > this.navTop;
    },
    // ② 更新navList切换
    updateNavChange () {
      var scrollH = this.scrollTop + 50;
      if (scrollH <= this.f2H) {
        this.type = 1;
      }
      if (scrollH > this.f2H && scrollH <= this.f3H) {
        this.type = 2;
      }
      if (scrollH > this.f3H && scrollH <= this.f4H) {
        this.type = 3;
      }
      if (scrollH > this.f4H) {
        this.type = 4;
      }
    },
    // ③ 更新malltab吸顶
    updateTabSticky () {
      if (this.scrollTop + 50 > this.tabTop) {
        if (this.tabFixed) {
          return;
        } else {
          this.tabFixed = true;
          this.bgcolor = "#FFFFFF";
        }
      } else {
        this.tabFixed = false;
        this.bgcolor = "#F3F4F6";
      }
    },
    // ④ 底部开通会员显示隐藏
    updateFooterChange () {
      // 是会员的话返回
      if (this.is_plus) {
        return;
      }
      const query = wx.createSelectorQuery();
      query
        .select("#equityopen")
        .boundingClientRect(res => {
          if (res) {
            this.footerShow = res.bottom < 0;
          }
        })
        .exec();
    },
    // tab栏切换
    toggle_tab (item) {
      this.tab_id = item.id;
      this.tab_value = item.value;
      this.isbottom = false;
      this.num = 1;
      this.getMall(this.num);
    },
    // 获取tab数组
    getTabData () {
      common.fly_post("api/v4_5/project/tab_check", { tabNum: 3 }, result => {
        let res = result.data;
        if (res.status_code == "0") {
          this.tab_arr = res.data;
          if (this.tab_arr.length > 0) {
            this.tab_arr[0].active = true;
            this.tab_id = this.tab_arr[0].id;
            this.tab_value = this.tab_arr[0].value;
            // 获取当前tab对应的商品列表
            this.getMall(this.num);
          }
        } else {
          wx.showToast({
            title: res.message, //提示的内容,
            icon: "none", //图标,
            duration: 1500, //延迟时间,
            mask: false, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    //商品列表
    getMall () {
      if (this.isbottom) {
        return false;
      }
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/shop_goods/index",
        {
          page: this.num,
          pageSize: 10,
          recommend_set: 1,
          keyword: this.tab_value,
          user_id: wx.getStorageSync("user_id") || 0
        },
        response => {
          common.mmk_Loading(1);
          let res = response.data;
          if (res.status_code == 0) {
            if (this.num == 1) {
              this.mallList = res.data.data;
            } else if (res.data.data.length > 0 && this.num > 1) {
              this.mallList.push(...res.data.data);
            } else if (res.data.data.length == 0 && this.num > 1) {
              common.mmk_Loading(2, "已经到最底下了");
              this.isbottom = true;
            }
          }
        }
      );
    },
    //上拉加载
    pullrefresh (e) {
      this.num++;
      this.getMall(this.num);
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  box-sizing: border-box;
}

// 会员权益
.equitybox {
  width: 100%;
  background: url("https://img.ameimeika.com/h5_images/mp_images/mp_3.1.1/plus_equity_bg.png")
    no-repeat;
  background-size: 100% 100%;
  background-position-y: bottom; /*背景图片在纵向的最下方显示*/
  padding: 10px 10px 20px;
  box-sizing: border-box;
  .card {
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(250, 222, 189, 1) 0%,
      rgba(237, 170, 99, 1) 100%
    );
    border-radius: 10px;
    padding-top: 14px;
    box-sizing: border-box;
    .title {
      display: flex;
      justify-content: space-between;
      margin: 0 14px;
      .titleicon {
        width: 14px;
        height: 10px;
        vertical-align: middle;
        margin-right: 4px;
      }
      .titletext {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(66, 30, 30, 1);
      }
      .titlebtn {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(66, 30, 30, 0.5);
      }
      .titlearrow {
        width: 10px;
        height: 8px;
        vertical-align: middle;
        margin-left: 4px;
        transform: rotate(0);
        transform-origin: center center;
        transition: all 0.3s;
      }
      .titlearrow-active {
        transform: rotate(180deg);
        transform-origin: center center;
      }
    }
    .equitylist {
      display: flex;
      flex-wrap: wrap;
      margin: 23px 14px 0;
      transform-origin: center;
      transition: all 0.3s ease-in-out;
      overflow: hidden;
      box-sizing: border-box;
      .equityitem {
        width: 20%;
        text-align: center;
        margin-bottom: 23px;
        img {
          width: 27px;
          height: auto;
        }
        p {
          font-size: 12px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 239, 217, 1);
          line-height: 18px;
          margin-top: 2px;
        }
      }
    }
    .equitytip {
      width: 100%;
      height: 28px;
      line-height: 28px;
      border-radius: 0px 0px 10px 10px;
      background: linear-gradient(
        260deg,
        rgba(255, 212, 152, 0.63) 0%,
        rgba(247, 198, 130, 0.53) 100%
      );
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(66, 30, 30, 0.7);
    }
  }
}
.equityopen {
  width: 92%;
  height: 38px;
  line-height: 38px;
  background: linear-gradient(
    180deg,
    rgba(255, 234, 203, 1) 0%,
    rgba(255, 192, 109, 1) 100%
  );
  border-radius: 21px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(66, 30, 30, 1);
  margin: 14px auto 0;
}
// 权益弹窗
.equityPopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99996;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  .carouselbox {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    .banner-swiper {
      width: 100%;
      height: 418px;
      box-sizing: border-box;
      .banner-item {
        width: 80%;
        padding: 0 8px;
        box-sizing: border-box;
        .slide-image {
          width: 100%;
          height: 100%;
          display: block;
          border-radius: 10px;
          transition: all 0.1s linear;
        }
        .banner-scale {
          transform: scaleY(0.9);
          transform-origin: center center;
        }
      }
    }
    .closebtn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin: 30px auto 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.equityPopup-show {
  opacity: 1;
  visibility: visible;
}
// 懒人福利社
.plusPopup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 99996;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  .picpopupbox {
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .close {
      width: 28px;
      height: 28px;
      position: absolute;
      top: -20px;
      right: 18px;
    }
    .imgbox {
      width: 100%;
      height: 347px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .openNow {
      width: 243px;
      height: 40px;
      background: linear-gradient(
        180deg,
        rgba(250, 222, 189, 1) 0%,
        rgba(237, 170, 99, 1) 100%
      );
      border-radius: 21px;
      margin: 19px auto 0;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(56, 50, 54, 1);
      line-height: 40px;
    }
  }
}
.plusPopup-show {
  opacity: 1;
  visibility: visible;
}
// 渐变背景
.bgwrap {
  background: linear-gradient(
    180deg,
    rgba(255, 247, 241, 1) 0%,
    rgba(236, 236, 236, 0) 100%
  );
}
// 广告位
.bannerbox {
  width: 100%;
  padding: 10px 10px 0;
  box-sizing: border-box;
  // 广告位
  .adverbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
    div {
      width: 49%;
      height: 80px;
      border-radius: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
  }
  .plushuodong {
    width: 100%;
    height: 100px;
    margin: 10px auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// nav联动导航
.sticky-fixed {
  width: 100%;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: sticky;
  background: #ffffff;
  top: 0;
  z-index: 9999;
}

.navlist {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  div {
    width: 25%;
    text-align: center;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
  }
  .active {
    font-size: 18px;
    font-weight: 600;
    color: rgba(51, 51, 51, 1);
    position: relative;
    &::after {
      content: "";
      display: block;
      width: 6px;
      height: 6px;
      background: rgba(0, 0, 0, 1);
      border-radius: 3px;
      position: absolute;
      left: 50%;
      bottom: 6px;
      transform: translateX(-50%);
    }
  }
}
// 站位
.paddingtop {
  content: "32543657";
  opacity: 0;
  width: 100%;
  padding-top: 56px;
}
// 精选PLUS
.plusbox {
  padding: 10px 10px 0;
  box-sizing: border-box;
  .plusmain {
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(255, 220, 171, 0.43) 0%,
      rgba(236, 175, 93, 0.41) 100%
    );
    border-radius: 10px;
    padding: 14px 10px 10px;
    box-sizing: border-box;
    .plustitle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .titlelf {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        background: linear-gradient(
          270deg,
          rgba(94, 64, 64, 1) 0%,
          rgba(136, 77, 77, 1) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .titlert {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(156, 124, 108, 1);
        img {
          width: 9px;
          height: 10px;
          margin: 0 0 0 4px;
        }
      }
    }
    .pluscard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .carditem {
        width: 49%;
        background: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.1.1/plus_card_bg.png)
          no-repeat;
        background-size: 100%;
        padding: 10px 10px 5px;
        box-sizing: border-box;
        .cardtitle {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 224, 170, 1);
          margin-bottom: 4px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .carddesc {
          font-size: 12px;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 300;
          color: rgba(255, 224, 170, 0.92);
          margin-bottom: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .cardprice {
          font-size: 21px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 209, 129, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          .yang {
            font-size: 14px;
          }
        }
      }
    }
    .pluscardIos {
      .carditem {
        padding: 7px 10px 8px;
      }
    }
  }
  .plusmainIos {
    padding: 16px 10px 8px;
  }
}
// 商城优选
.mallbox {
  padding: 10px 10px 0;
}

// 商城优选背景
.lightbg {
  background: linear-gradient(
    180deg,
    rgba(255, 247, 241, 1) 0%,
    rgba(236, 236, 236, 0) 100%
  );
}
// 生活美容,品质医美背景
.whitebg {
  background-color: #f3f4f6;
}
// 底部开通会员
.footer {
  width: 100%;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffeacb;
  padding: 5px 10px;
  box-sizing: border-box;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transform-origin: center;
  transition: all 0.5s ease-in-out;
  -webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
  -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/
  background: #eaeaec;
  min-height: 36px;
  background: rgba(255, 234, 203, 1);
  .footerlf {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(66, 30, 30, 0.7);
    line-height: 16px;
  }
  .footerrt {
    width: 66px;
    height: 26px;
    line-height: 26px;
    background: linear-gradient(
      3deg,
      rgba(39, 36, 36, 1) 0%,
      rgba(64, 67, 84, 1) 100%
    );
    border-radius: 5px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 213, 138, 1);
  }
}
.footer-show {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  visibility: visible;
}
// 精品推荐
.plusquality {
  background: #f3f4f6;
  text-align: center;
  padding: 20px 0 0;
  box-sizing: border-box;
  img {
    width: 100px;
    height: auto;
  }
}
//商品列表
.goods-list {
  position: relative;
  .malltab {
    width: 100%;
    position: -webkit-sticky;
    position: -moz-sticky;
    position: sticky;
    top: 46px;
    z-index: 90;
  }
  .daodi {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 60px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #999990;
    line-height: 20px;
  }
}
</style>